<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>商城-商品列表</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 为开发方便为,所使用的JS和CSS文件本地引用，在生产环境中请考虑使用CDN加速服务 -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
  <!-- 以下为IE8的兼容性脚本，如果从文件夹中直接打开页面无效，需要部署到服务器端访问才能生效 -->
  <!--[if lt IE 9]>
  <script src="${pageContext.request.contextPath}/js/html5shiv.js"></script>
  <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <!-- 这里插入LOGO图标 -->
          <!-- <img alt="LOGO" src="images/logo.png"/>-->LOL网上商城
        </a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
              <li class="dropdown" id="car">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的购物车<span style="color: #ffff00">${sessionScope.carSize }<c:if test="${empty sessionScope.carSize }">0</c:if></span>件</a>
                  <ul class="dropdown-menu" role="menu">
                  	<c:forEach items="${sessionScope.car }" var="carBean">
                      <li><a href="${pageContext.request.contextPath}/customer/showProductDetail.action?commodityId=${carBean.value.commodity.id}">${carBean.value.commodity.commodityName }<span class="badge">${carBean.value.count }</span></a></li>
                    </c:forEach>
                      <li class="divider"></li>
                      <li><a href="#">共<span style="color: red">${sessionScope.totalPrice }<c:if test="${empty sessionScope.totalPrice }">0</c:if></span>元</a><a href="${pageContext.request.contextPath}/customer/showCar.action" class="btn btn-default">结算</a></li>
                  </ul>
              </li>
          </ul>
          <form class="navbar-form navbar-right" role="search" action="${pageContext.request.contextPath}/customer/showProduct.action">
              <div class="form-group">
                  <input type="text" class="form-control" name="commName" placeholder="输入商品进行查询">
              </div>
              <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
              <li>
                  <a href="${pageContext.request.contextPath}/customer/index.action">首页</a>
              </li>
              <li class="active">
                  <a href="${pageContext.request.contextPath}/customer/showProduct.action">商品列表</a>
              </li>
              <c:if test="${sessionScope.user==null }">
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_loginUI.action">登录</a>
	              </li>
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_registerUI.action">注册</a>
	              </li>
              </c:if>
              <c:if test="${sessionScope.user!=null }">
              	  <li>
	                  	<a href="">欢迎，${sessionScope.user.userAccount }</a>
	              </li>
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_logout.action" onclick="return confirm('确定要注销吗？')">注销</a>
	              </li>
	              <li class="dropdown">
	                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">个人中心</a>
	                  <ul class="dropdown-menu" role="menu">
	                      <li><a href="${pageContext.request.contextPath}/customer/showDataSet.action">资料设置</a></li>
	                      <li><a href="${pageContext.request.contextPath}/customer/showAccount.action">账户</a></li>
	                      <li><a href="${pageContext.request.contextPath}/customer/showOrder.action">我的订单</a></li>
	                  </ul>
	              </li>
              </c:if>
          </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <img src="${pageContext.request.contextPath}/img/dai.png">
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-xs-3">
          <div class="invite-block">
              <ul class="nav nav-pills nav-stacked" role="tablist">
                  <c:forEach items="${commodityClassList }" var="commodityClass">
                  	<li role="presentation"><a href="${pageContext.request.contextPath}/customer/showProduct.action?commodityClassId=${commodityClass.id}">${commodityClass.commodityClassName }</a></li>
                  </c:forEach>
              </ul>
              </div>
      </div>
      <div class="col-xs-9">
          <div class="invite-block">
              <div class="row">
                  <div class="col-xs-12 page-header">
                      <div class="col-xs-12">
                          <h4>
                              商品筛选
                          </h4>
                      </div>
                      <div class="col-xs-12">
                          <form role="form" class="form-inline" action="${pageContext.request.contextPath}/customer/showProduct.action" method="get">
                              <input type="hidden" name="commodityClassId" value="${commodityClassId }">
                              <div class="form-group">
                                  <label class="sr-only" for="commName"></label>
                                  <input type="text" class="form-control" id="commName" name="commName" placeholder="关键字">
                              </div>
                              <button type="submit" class="btn btn-default">确定</button>
                          </form>
                      </div>
                  </div>
                  <c:forEach items="${productPageBean.recordList }" var="product">
	                  <div class="col-xs-12 col-sm-4">
	                      <div class="invite-block" style="height:100px;">
	                          <div class="col-xs-3">
				                    <a href="${pageContext.request.contextPath}/customer/showProductDetail.action?commodityId=${product.id}"><img src="${pageContext.request.contextPath}/admin/showImg.action?commodityId=${product.id}" style="width: 76px;height: 76px; margin-left: -15px;"></a>
				                </div>
				                <div class="col-xs-9">
				                    <div class="col-xs-12">
				                        <a href="${pageContext.request.contextPath}/customer/showProductDetail.action?commodityId=${product.id}"><strong>${product.commodityName}</strong></a>
				                    </div>
				                    <div class="col-xs-12">
				                        价格：<span style="color: red;margin-right: -10px">￥${product.commodityPrice}</span>
				                    </div>
				                    <div class="col-xs-12 text-right">
				                        <input type="button" value="加入购物车" class="btn btn-danger btn-sm" onclick="addToCar(${product.id})">
				                    </div>
				                </div>
	                      </div>
	                  </div>
                  </c:forEach>
              </div>
              
              <div class="col-md-12 col-md-offset-7">
                  <nav>
                      <ul class="pagination">
                      	  <c:forEach begin="${productPageBean.beginPageIndex }" end="${productPageBean.endPageIndex }" var="num">
                      	  	  <c:if test="${num==productPageBean.beginPageIndex }"><li><a href="${pageContext.request.contextPath}/customer/showProduct.action?pageNum=${productPageBean.beginPageIndex }&commodityClassId=${commodityClassId}&commName=${commName}">&laquo;</a></li></c:if>
	                          <c:if test="${num==productPageBean.currentPage}"><li class="active"><a href="">${num }</a></li></c:if>
	                          <c:if test="${num!=productPageBean.currentPage}"><li><a href="${pageContext.request.contextPath}/customer/showProduct.action?pageNum=${num }&commodityClassId=${commodityClassId}&commName=${commName}">${num }</a></li></c:if>
	                          <c:if test="${num==productPageBean.endPageIndex }"><li><a href="${pageContext.request.contextPath}/customer/showProduct.action?pageNum=${productPageBean.endPageIndex }&commodityClassId=${commodityClassId}&commName=${commName}">&raquo;</a></li></c:if>
                          </c:forEach>
                      </ul>
                  </nav>
              </div>
      </div>
    </div>
</div>
</div>



  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-xs-12"><p class="text-center">COPYRIGHT &copy; 2014 LUOJIE. ALL RIGHTS RESERVED.</p></div>
      </div>
    </div>
  </footer>

  <!-- 外部JS脚本文件 -->
  <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  	function addToCar(commodityId){
  		$.ajax({
  			url:"/Mall/customer/addToCar.action",
  			data:{commodityId:commodityId},
  			success:function(data){
  				var html="<a href='#' class='dropdown-toggle' data-toggle='dropdown'>我的购物车<span style='color: #ffff00'>"+data.session.carSize+"</span>件</a>"
                		+"<ul class='dropdown-menu' role='menu'>";
  				$("#car").empty();
  				for (var i in data.session.car) {
					html+="<li><a href='Mall/customer/showProductDetail.action?commodityId="+data.session.car[i].commodity.id+"'>"+data.session.car[i].commodity.commodityName+"<span class='badge'>"+data.session.car[i].count+"</span></a></li>";
				}
                html+="<li class='divider'></li>"
                  	+"<li><a href='#'>共<span style='color: red'>"+data.session.totalPrice+"</span>元</a><a href='Mall/customer/showCar.action' class='btn btn-default'>结算</a></li>"
                	+"</ul>";
                $("#car").append(html);
  			}
  		});
  	}
  </script>
</body>

</html>